<template>
  <div class="product-list">
    <dl class="product-item" v-for="item in products" :key="item.id">
      <dt><img :src="item.cover" /></dt>
      <dd>
        <div>
          <h2>{{item.name}}</h2>
          <p class="des">累计{{item.sales}}份</p>
        </div>
        <p class="price"><b>{{item.price}}</b><s>{{item.oldPrice}}</s></p>
        <button @click="addCar(item)">添加购物车</button>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: 'ProductList',
  props: {
    products: {
      type: Array,
      default: () => []
    }
  },
    methods:{
        addCar(item){
           this.$store.dispatch('car/add',{
             product_id:item.id
           }).then((res)=>{
             console.log(res)
             this.$message.success('添加成功')
           })
        }
    }
}
</script>

<style lang="scss" scoped>
.product-list {
  @include wh(100%, auto);
  .product-item {
    @include wh(100%, auto);
    @include flex();
    @include border1px(bottom);
    padding: 30px 0;
    dt {
      @include wh(240px, 240px);
      img {
        @include wh(240px, 240px);
      }
    }
    dd {
      @include wh(100%, 240px);
      @include flex(column, space-around, flex-start );
      flex: 1;
      h2 {
        font-size: 32px;
      }
      .des {
        font-size:$font-size-s;
        color: $text-des-color;
        line-height: 2;
      }
      .price {
        font-size:$font-size-s;
        color: $text-des-color;
        line-height: 2;
        b {
          font-size: $font-size-l;
          color: $base-color;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>
